<template>
  <div class="login">
    <!-- 动态背景容器 -->
    <div class="dynamic-bg">
      <!-- 天空渐变层 -->
      <div class="sky"></div>
      <!-- 阳光效果 -->
      <div class="sun"></div>
      <!-- 光束效果 -->
      <div class="sun-rays"></div>
      <!-- 云朵层 -->
      <div class="clouds"></div>
      <!-- 花朵飘落层 -->
      <div class="flowers"></div>
      <!-- 浮动光点 -->
      <div class="floating-sparks"></div>
      <!-- 互动光晕层 -->
      <div class="interaction-glow"></div>
      <!-- 鼠标轨迹层 -->
      <div class="mouse-trails"></div>
      <!-- 地面层 -->
      <div class="ground"></div>
    </div>

    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">{{ title }}</h3>
      <el-form-item prop="username">
        <el-input
            v-model="loginForm.username"
            type="text"
            size="large"
            auto-complete="off"
            placeholder="账号"
        >
          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
            v-model="loginForm.password"
            type="password"
            size="large"
            auto-complete="off"
            placeholder="密码"
            @keyup.enter="handleLogin"
        >
          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
        </el-input>
      </el-form-item>
      <el-form-item prop="code" v-if="captchaEnabled">
        <el-input
            v-model="loginForm.code"
            size="large"
            auto-complete="off"
            placeholder="验证码"
            style="width: 63%"
            @keyup.enter="handleLogin"
        >
          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
        </el-input>
        <div class="login-code">
          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
        </div>
      </el-form-item>
      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 10px 0px;">记住密码</el-checkbox>
      <el-form-item style="width:100%;">
        <el-button
            :loading="loading"
            size="large"
            type="primary"
            style="width:100%;"
            @click.prevent="handleLogin"
        >
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
        <el-row style="width: 100%;">
          <el-col :span="12">
            <div v-if="forgetpwd"><router-link class="link-type" :to="'/forgetpwd'">忘记密码</router-link></div>
          </el-col>
          <el-col :span="12" style="text-align: right">
            <div v-if="register"><router-link class="link-type" :to="'/register'">立即注册</router-link></div>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { getCodeImg, openFun } from "@/api/login";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import useUserStore from '@/store/modules/user'
import { getLoginStore, setLoginStore, removeLoginStore } from "@/utils/auth"
import { useRouter } from 'vue-router'
import { getCurrentInstance, ref, onMounted, nextTick } from 'vue'

const title = import.meta.env.VITE_APP_TITLE
const userStore = useUserStore()
const router = useRouter();
const { proxy } = getCurrentInstance();

// 登录表单数据
const loginForm = ref({
  username: "",
  password: "",
  rememberMe: false,
  code: "",
  uuid: ""
});

// 表单验证规则
const loginRules = {
  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
};

// 其他响应式变量
const codeUrl = ref("");
const loading = ref(false);
const captchaEnabled = ref(true);
const register = ref(false);
const forgetpwd = ref(false);
const redirect = ref(undefined);

// 窗口尺寸常量
const WINDOW_WIDTH = 1600;
const WINDOW_HEIGHT = 900;

// 鼠标轨迹数组
const mouseTrails = ref([]);
// 鼠标位置记录
const mousePosition = ref({ x: 0, y: 0 });
// 鼠标移动速度
const mouseSpeed = ref(0);
// 上一帧鼠标位置
let lastMouseX = 0;
let lastMouseY = 0;

// 生成指定范围内的随机数
const randomRange = (min, max) => Math.random() * (max - min) + min;

// 页面加载完成后初始化动态效果
onMounted(() => {
  // 确保DOM完全渲染后再执行
  nextTick(() => {
    // 检查容器是否存在
    const cloudContainer = document.querySelector('.clouds');
    const flowerContainer = document.querySelector('.flowers');
    const sparkContainer = document.querySelector('.floating-sparks');
    const trailContainer = document.querySelector('.mouse-trails');

    if (cloudContainer && flowerContainer && sparkContainer && trailContainer) {
      createClouds();
      createFallingFlowers();
      createFloatingSparks();
      document.addEventListener('mousemove', handleMouseMove);
      // 启动动画帧更新
      requestAnimationFrame(updateAnimation);
    } else {
      console.error('动态效果容器未找到，可能DOM未加载完成');
    }
  });
});

// 处理鼠标移动
function handleMouseMove(e) {
  // 记录当前鼠标位置
  mousePosition.value.x = e.clientX;
  mousePosition.value.y = e.clientY;

  // 计算鼠标移动速度
  const dx = e.clientX - lastMouseX;
  const dy = e.clientY - lastMouseY;
  mouseSpeed.value = Math.sqrt(dx * dx + dy * dy);

  // 更新上一帧位置
  lastMouseX = e.clientX;
  lastMouseY = e.clientY;

  // 更新互动光晕位置和大小
  const glow = document.querySelector('.interaction-glow');
  if (glow) {
    glow.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
    glow.style.opacity = '0.6';

    // 根据速度调整光晕大小
    const size = 300 + Math.min(mouseSpeed.value * 3, 300);
    glow.style.width = `${size}px`;
    glow.style.height = `${size}px`;

    // 随机颜色变化
    const hue = (Date.now() / 50) % 360;
    glow.style.background = `radial-gradient(circle, hsla(${hue}, 80%, 70%, 0.6) 0%, hsla(${hue}, 80%, 50%, 0) 70%)`;
  }

  // 创建鼠标轨迹
  if (mouseSpeed.value > 2) {
    createMouseTrail(e.clientX, e.clientY);
  }
}

// 创建鼠标轨迹
function createMouseTrail(x, y) {
  const trailContainer = document.querySelector('.mouse-trails');
  if (!trailContainer) return;

  const trail = document.createElement('div');
  trail.className = 'mouse-trail';

  // 根据速度调整轨迹大小和透明度
  const size = randomRange(5, 15) + (mouseSpeed.value / 5);
  const opacity = 0.5 + Math.min(mouseSpeed.value / 30, 0.5);

  trail.style.width = `${size}px`;
  trail.style.height = `${size}px`;
  trail.style.left = `${x}px`;
  trail.style.top = `${y}px`;
  trail.style.opacity = opacity;

  // 随机颜色
  const hue = (Date.now() / 30) % 360;
  trail.style.backgroundColor = `hsla(${hue}, 80%, 70%, 0.8)`;

  trailContainer.appendChild(trail);

  // 轨迹消失动画
  setTimeout(() => {
    trail.style.opacity = '0';
    setTimeout(() => trail.remove(), 500);
  }, 300);
}

// 动画帧更新
function updateAnimation() {
  // 更新花朵位置（追随鼠标）
  updateFlowerPositions();

  // 继续下一帧
  requestAnimationFrame(updateAnimation);
}

// 更新花朵位置，使其追随鼠标同时保持独立下落
function updateFlowerPositions() {
  const flowers = document.querySelectorAll('.flower');
  flowers.forEach(flower => {
    // 获取花朵原始位置和当前位置
    const originalX = parseFloat(flower.dataset.originalX);
    const originalY = parseFloat(flower.dataset.originalY);
    const currentX = parseFloat(flower.dataset.currentX) || originalX;
    const currentY = parseFloat(flower.dataset.currentY) || originalY;
    const speedFactor = parseFloat(flower.dataset.speedFactor); // 每个花朵的独立速度因子

    // 计算与鼠标的距离
    const dx = mousePosition.value.x - currentX;
    const dy = mousePosition.value.y - currentY;
    const distance = Math.sqrt(dx * dx + dy * dy);

    // 吸引力强度（距离越近吸引力越强）
    const attraction = Math.max(0, 1 - distance / 300) * 3;

    // 计算新位置（趋向鼠标但保持原有飘落轨迹）
    const fallProgress = parseFloat(flower.dataset.fallProgress) || 0;
    const newFallProgress = (fallProgress + 0.001 * speedFactor) % 1; // 应用速度因子
    flower.dataset.fallProgress = newFallProgress;

    // 基础飘落轨迹（每个花朵有独立的水平摆动）
    const swing = parseFloat(flower.dataset.swing); // 每个花朵的独立摆动幅度
    const baseX = originalX + Math.sin(newFallProgress * Math.PI * 2 * swing) * 30;
    const baseY = originalY + newFallProgress * WINDOW_HEIGHT * 0.8;

    // 应用鼠标吸引力
    const newX = baseX + (dx / distance) * attraction;
    const newY = baseY + (dy / distance) * attraction;

    // 如果花朵落到地面以下，重置位置
    if (newY > WINDOW_HEIGHT) {
      flower.dataset.fallProgress = 0;
      flower.dataset.currentX = originalX;
      flower.dataset.currentY = originalY;
      return;
    }

    // 更新位置数据
    flower.dataset.currentX = newX;
    flower.dataset.currentY = newY;

    // 应用变换
    const rotate = (newFallProgress * 360) + (dx / 10);
    flower.style.transform = `translate(${newX - originalX}px, ${newY - originalY}px) rotate(${rotate}deg)`;

    // 根据距离改变透明度和大小
    if (distance < 200) {
      const scale = 1 + (200 - distance) / 200 * 0.5;
      const bright = 1 + (200 - distance) / 200 * 0.5;
      flower.style.transform = `translate(${newX - originalX}px, ${newY - originalY}px) rotate(${rotate}deg) scale(${scale})`;
      flower.style.filter = `brightness(${bright})`;
    } else {
      flower.style.filter = 'brightness(1)';
    }
  });
}

// 创建浮动光点
function createFloatingSparks() {
  const container = document.querySelector('.floating-sparks');
  if (!container) return;

  container.innerHTML = '';

  for (let i = 0; i < 60; i++) {
    const spark = document.createElement('div');
    spark.className = 'spark';

    const size = randomRange(2, 5);
    const left = randomRange(0, 100);
    const top = randomRange(0, 100);
    const opacity = randomRange(0.3, 0.7);
    const delay = randomRange(0, 5);
    const duration = randomRange(6, 12);

    spark.style.width = `${size}px`;
    spark.style.height = `${size}px`;
    spark.style.left = `${left}%`;
    spark.style.top = `${top}%`;
    spark.style.opacity = opacity;
    spark.style.animationDelay = `${delay}s`;
    spark.style.animationDuration = `${duration}s`;

    container.appendChild(spark);
  }
}

// 创建云朵（尺寸减小，清晰度提高）
function createClouds() {
  const container = document.querySelector('.clouds');
  if (!container) return;

  container.innerHTML = '';

  for (let i = 0; i < 8; i++) { // 增加云朵数量以保持视觉效果
    const cloud = document.createElement('div');
    cloud.className = 'cloud';

    // 云朵尺寸减小约30%
    const size = randomRange(100, 180);
    const left = randomRange(-30, 100);
    const top = randomRange(5, 20);
    const delay = randomRange(0, 10);
    const duration = randomRange(80, 150);
    const opacity = randomRange(0.8, 0.95); // 提高不透明度增加清晰度

    cloud.style.width = `${size}px`;
    cloud.style.height = `${size * 0.6}px`;
    cloud.style.left = `${left}%`;
    cloud.style.top = `${top}%`;
    cloud.style.opacity = opacity;
    cloud.style.animationDelay = `${delay}s`;
    cloud.style.animationDuration = `${duration}s`;

    container.appendChild(cloud);
  }
}

// 创建飘落的花朵（尺寸减小）
function createFallingFlowers() {
  const container = document.querySelector('.flowers');
  if (!container) return;

  container.innerHTML = '';

  const flowerColors = [
    '#ff69b4', '#ffb6c1', '#ffc0cb',
    '#ffd700', '#fffacd', '#f0e68c',
    '#87cefa', '#add8e6', '#9370db'
  ];

  for (let i = 0; i < 50; i++) { // 增加花朵数量以保持视觉效果
    const flower = document.createElement('div');
    flower.className = 'flower';

    // 花朵尺寸减小约25%
    const size = randomRange(8, 15);
    const left = randomRange(0, 100);
    const top = randomRange(-10, 0);
    const delay = randomRange(0, 8);
    const duration = randomRange(15, 30);
    const opacity = randomRange(0.8, 0.95); // 提高不透明度
    const color = flowerColors[Math.floor(Math.random() * flowerColors.length)];
    const speedFactor = randomRange(0.5, 1.5);
    const swing = randomRange(0.5, 2);

    flower.style.width = `${size}px`;
    flower.style.height = `${size}px`;
    flower.style.left = `${left}%`;
    flower.style.top = `${top}%`;
    flower.style.opacity = opacity;
    flower.style.backgroundColor = color;
    flower.style.animationDelay = `${delay}s`;
    flower.style.animationDuration = `${duration}s`;

    // 存储每个花朵的独立参数
    const originalX = left * WINDOW_WIDTH / 100;
    const originalY = top * WINDOW_HEIGHT / 100;
    flower.dataset.originalX = originalX;
    flower.dataset.originalY = originalY;
    flower.dataset.speedFactor = speedFactor;
    flower.dataset.swing = swing;

    container.appendChild(flower);

    // 创建花瓣
    for (let p = 0; p < 5; p++) {
      const petal = document.createElement('div');
      petal.className = 'petal';
      petal.style.width = `${size * 0.6}px`;
      petal.style.height = `${size * 0.6}px`;
      petal.style.backgroundColor = color;
      petal.style.transform = `rotate(${p * 72}deg) translate(${size * 0.3}px, 0)`;
      flower.appendChild(petal);
    }

    // 花心
    const center = document.createElement('div');
    center.className = 'flower-center';
    center.style.width = `${size * 0.3}px`;
    center.style.height = `${size * 0.3}px`;
    flower.appendChild(center);
  }
}

// 登录处理函数
function handleLogin() {
  proxy.$refs.loginRef.validate(valid => {
    if (valid) {
      loading.value = true;
      if (loginForm.value.rememberMe) {
        setLoginStore(loginForm.value.username, encrypt(loginForm.value.password), loginForm.value.rememberMe)
      } else {
        removeLoginStore()
      }
      userStore.login(loginForm.value).then(() => {
        router.push({ path: redirect.value || "/" });
      }).catch(() => {
        loading.value = false;
        if (captchaEnabled.value) {
          getCode();
        }
      });
    }
  });
}

// 获取验证码
function getCode() {
  getCodeImg().then(res => {
    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
    if (captchaEnabled.value) {
      codeUrl.value = "data:image/gif;base64," + res.data.img;
      loginForm.value.uuid = res.data.uuid;
    }
  });
}

// 初始化注册和忘记密码选项
function openSwitch() {
  openFun().then(res => {
    register.value = res.data.register
    forgetpwd.value = res.data.forgetpwd
  })
}

// 获取记住的密码
function getCookie() {
  const loginStore = getLoginStore()
  const username = loginStore.username;
  const password = loginStore.password;
  const rememberMe = loginStore.rememberMe;
  loginForm.value = {
    username: username === undefined ? loginForm.value.username : username,
    password: password === undefined || password === null ? loginForm.value.password : decrypt(password),
    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
  };
}

// 初始化页面
openSwitch();
getCode();
getCookie();
</script>

<style lang='scss' scoped>
// 自定义鼠标指针 - 蝴蝶形状（更有趣的指针）
.login {
  cursor: url("../assets/images/cursor-pack.png") 12 12, auto;

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin: 0 auto;
}

// 输入框和按钮区域恢复默认指针
.login-form, .login-code-img, .link-type {
  cursor: default;
}

.el-input, .el-button, .el-checkbox {
  cursor: pointer;
}

.dynamic-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #87CEEB 0%, #87CEEB 70%, #8fbc8f 100%);
  animation: skyShift 60s infinite alternate ease-in-out;
  z-index: 1;
}

.sun {
  position: absolute;
  top: 12%;
  right: 15%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, #ffd700 0%, #ffA500 100%);
  border-radius: 50%;
  box-shadow: 0 0 80px rgba(255, 215, 0, 0.8), 0 0 120px rgba(255, 165, 0, 0.5);
  animation: sunOrbit 120s infinite linear;
  z-index: 2;
}

.sun-rays {
  position: absolute;
  top: 12%;
  right: 15%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: transparent;
  background-image:
      linear-gradient(0deg, rgba(255, 255, 200, 0.3) 2px, transparent 2px),
      linear-gradient(45deg, rgba(255, 255, 200, 0.3) 2px, transparent 2px),
      linear-gradient(90deg, rgba(255, 255, 200, 0.3) 2px, transparent 2px),
      linear-gradient(135deg, rgba(255, 255, 200, 0.3) 2px, transparent 2px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: center;
  transform-origin: center;
  animation: sunRaysRotate 60s infinite linear, sunOrbit 120s infinite linear;
  z-index: 3;
}

// 云朵相关样式 - 提高清晰度，减小尺寸
:deep(.clouds) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  z-index: 4;
}

:deep(.cloud) {
  position: absolute;
  background: rgba(255, 255, 255, 0.95); // 提高不透明度增加清晰度
  border-radius: 50%;
  filter: blur(2px); // 减少模糊效果提高清晰度
  animation: cloudFloat 120s infinite linear;
}

:deep(.cloud::before), :deep(.cloud::after) {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
}

:deep(.cloud::before) {
  width: 60%;
  height: 60%;
  top: -30%;
  left: 10%;
}

:deep(.cloud::after) {
  width: 40%;
  height: 40%;
  top: -10%;
  right: 10%;
}

// 花朵相关样式 - 减小尺寸
:deep(.flowers) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

:deep(.flower) {
  position: absolute;
  border-radius: 50%;
  transform-origin: center;
  transition: transform 0.1s ease-out, filter 0.3s ease;
}

:deep(.petal) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center left;
  border-radius: 50% 50% 0 0;
  transition: transform 0.2s ease;
}

:deep(.flower-center) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffd700;
  border-radius: 50%;
}

.ground {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(to top, #228b22 0%, #32cd32 100%);
  z-index: 10;
}

:deep(.floating-sparks) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 12;
}

:deep(.spark) {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 255, 220, 0.9);
  transform: translateY(0);
  animation: floatUp 16s infinite ease-in-out;
}

// 互动光晕样式
:deep(.interaction-glow) {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: blur(80px);
  pointer-events: none;
  transition: opacity 0.3s ease, width 0.2s ease, height 0.2s ease, background 0.1s ease;
  opacity: 0;
  z-index: 13;
}

// 鼠标轨迹容器
:deep(.mouse-trails) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 14;
}

// 鼠标轨迹样式
:deep(.mouse-trail) {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.3s ease;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

.login-form {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(15px);
  width: 400px;
  padding: 35px 35px 15px 35px;
  box-shadow: 0 15px 35px rgba(0, 100, 50, 0.2);
  transition: all 0.4s ease-in-out;
  position: relative;
  z-index: 20;
}

/* 动画关键帧 */
@keyframes sunOrbit {
  0% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-80px, 40px) scale(1.05); }
  50% { transform: translate(-40px, 80px) scale(1); }
  75% { transform: translate(40px, 40px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes sunRaysRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes floatUp {
  0% { transform: translateY(900px) rotate(0deg); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.7; }
  100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

@keyframes skyShift {
  0% { background: linear-gradient(to bottom, #87CEEB 0%, #87CEEB 70%, #8fbc8f 100%); }
  100% { background: linear-gradient(to bottom, #b0e2ff 0%, #b0e2ff 70%, #9acd32 100%); }
}

/* 云朵漂浮动画 */
@keyframes cloudFloat {
  0% { transform: translateX(0) translateY(0); }
  100% { transform: translateX(-1600px) translateY(0); }
}

.title {
  margin: 0 auto 30px auto;
  text-align: center;
  color: #00665a;
  font-weight: 600;
  letter-spacing: 2px;
  font-size: 24px;
  position: relative;
  z-index: 20;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);

  &::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(to right, transparent, #00cfcf, transparent);
    animation: shimmer 3s infinite linear;
  }
}

.el-input {
  height: 44px;
  input {
    height: 44px;
    font-size: 15px;
    border: 1px solid #b2ebf2;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    &:focus {
      border-color: #00bcd4;
      box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
      outline: none;
    }
  }

  .input-icon {
    fill: #009688;
    transition: fill 0.3s ease;
  }
}

.input-icon {
  height: 39px;
  width: 16px;
  margin-left: 2px;
}

.login-code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33%;
  height: 40px;
  margin-left: 10px;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 150, 136, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;

    &:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 10px rgba(0, 150, 136, 0.3);
    }
  }
}

.link-type {
  color: #009688;
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;

  &:hover {
    color: #00796b;
    text-shadow: 0 1px 2px rgba(0, 150, 136, 0.2);
  }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
</style>
